<!-- 免疫 -->
<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="form">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="免疫项目">
                    <el-input v-model="formInline.project" placeholder="免疫项目" size="small"></el-input>
                </el-form-item>
                <el-form-item label="猪舍">
                    <el-select v-model="formInline.pigsty" placeholder="猪舍" style="width:100%" clearable>
                        <el-option v-for="item in houses" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" size="small" icon="el-icon-plus" @click="showDialog">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                        @click="deleteHandle()">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 20px;" border>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="time" label="免疫日期" align="center">
                <template slot-scope="scope">
                    {{ (scope.row.time || '').substr(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="project" label="免疫项目" align="center">
            </el-table-column>
            <el-table-column prop="pigsty" label="猪舍" align="center">
            </el-table-column>
            <el-table-column prop="total" label="头数" align="center">
            </el-table-column>
            <el-table-column prop="vaccinum" label="疫苗" align="center">
            </el-table-column>
            <el-table-column prop="immuneMode" label="免疫方式" align="center">
            </el-table-column>
            <el-table-column prop="dosage" label="用量/头" align="center">
            </el-table-column>
            <el-table-column prop="operator" label="操作人" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="totalRecord">
        </el-pagination>
        <el-dialog :title="immunityForm.id ? '修改' : '新增'" :visible.sync="dialogVisible">
            <el-form ref="immunityForm" :model="immunityForm" :rules="immunityRules" label-width="90px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="免疫日期:" prop="time">
                            <el-date-picker v-model="immunityForm.time" type="date" placeholder="免疫日期" style="width:100%"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="免疫项目:" prop="project">
                            <el-input v-model="immunityForm.project" placeholder="免疫项目" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="猪舍:" prop="pigsty">
                            <el-select v-model="immunityForm.pigsty" placeholder="猪舍" style="width:100%" clearable>
                                <el-option v-for="item in houses" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头数:" prop="total">
                            <el-input v-model="immunityForm.total" placeholder="头数" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="疫苗:" prop="vaccinum">
                            <el-select v-model="immunityForm.vaccinum" placeholder="疫苗" style="width:100%">
                                <el-option v-for="item in vaccinumData" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="免疫方式:" prop="immuneMode">
                            <el-select v-model="immunityForm.immuneMode" placeholder="免疫方式" style="width:100%">
                                <el-option v-for="item in immuneModeData" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用量/头:" prop="dosage">
                            <el-input v-model="immunityForm.dosage" placeholder="用量/头" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作人:" prop="operator">
                            <UserSelect v-model="immunityForm.operator" style="width:100%"></UserSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('immunityForm')">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
  
<script>
import mixinViewModule from '@/mixins/view-module'

export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                // getDataListURL: '/history/deadmortality/page',
                // getDataListIsPage: true,
                // exportURL: '/history/deadmortality/export',
                deleteURL: '/999',
                deleteIsBatch: true
            },
            houses: [],//猪舍
            tableData: [
                {
                    id: 1,
                    time: '2023-01-02 00:00:00',
                    project: '猪瘟',
                    pigsty: '1舍',
                    total: 150,
                    vaccinum: '猪瘟活疫苗',
                    immuneMode: '肌注',
                    dosage: '10ml',
                    operator: '李四',
                },
            ],
            dialogVisible: false,
            immuneModeData: [
                {
                    value: '肌注',
                    label: '肌注'
                },
            ],
            vaccinumData: [
                {
                    value: '猪瘟活疫苗',
                    label: '猪瘟活疫苗'
                },
                {
                    value: '大肠杆菌活疫苗',
                    label: '大肠杆菌活疫苗'
                },
            ],
            vaccinum: [
                {
                    value: '金霉素',
                    label: '金霉素'
                },
                {
                    value: '支原净',
                    label: '支原净'
                },
                {
                    value: '伊维菌素',
                    label: '伊维菌素'
                },
            ],
            immunityForm: {
                id: '',
                time: '',
                project: '',
                pigsty: '',
                total: '',
                vaccinum: '',
                immuneMode: '',
                dosage: '',
                operator: '',
            },
            immunityRules: {
                time: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                project: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                pigsty: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                total: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                vaccinum: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                immuneMode: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                dosage: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                operator: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ]
            },
            currentPage: 1,//默认显示第一页
            pageSize: 10,//默认每页显示5条数据
            totalRecord: 100,//总数据条数
            formInline: {
                project: '',
                pigsty: '',
            },
        }
    },
    mounted() {
        this.getData();//列表接口
        this.getHouses();//猪舍接口
    },
    methods: {
        // 猪舍接口--------------
        getHouses() {
            this.$http.get(`/basic/house/all`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.houses = res.data
            }).catch(() => { })
        },
        // 列表接口------------------
        getData() {
            this.$http.get(`/aaa`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.tableData = res.data
            }).catch(() => { });
        },
        // 新增
        showDialog() {
            //显示对话框
            this.dialogVisible = true;
        },
        // 编辑
        handleEdit(index, row) {
            this.dialogVisible = true;
            // 赋值
            this.immunityForm = { ...row };
        },
        // 弹窗-确定接口--------------------
        submitForm(formName) {
            //当全部验证字段通过，再开始业务逻辑
            this.$refs[formName].validate((valid) => {
                //如果全部字段符合条件
                if (valid) {
                    if (!this.immunityForm.id) {
                        delete this.immunityForm.id
                    }
                    this.$http[!this.immunityForm.id ? 'post' : 'put'](`/a`, this.immunityForm).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.getData();
                        } else {
                            return this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        // 每页条数
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 搜索
        onSubmit() {
            console.log('submit!', this.formInline);
        }
    }
}
</script>
  
<style lang="scss" scoped></style>
  